<!-- 
  效果：SVG图片边框动画
  学习来源：https://www.bilibili.com/video/BV1zN4y1K7H4/?vd_source=7152d744ecc75d82a35a3ceffd3c94ce 
-->

<template>
  <div class="svg-border-container">
    <div class="svg-box">
      <div class="greedy-box">
        <div class="greedy-icon"></div>
      </div>
      <div class="content-box"></div>
    </div>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="SvgBorder"></script>

<style lang="scss" scoped>
.svg-border-container {
  width: 100%;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;

  .svg-box {
    position: relative;
    width: 600px;
    height: 200px;
    margin: auto;
    box-sizing: border-box;
    border: 20px solid;
    // background-color: rgb(0, 0, 0);
    /**
     * 使用border-image可在元素的边框上绘制图像 
     * border-image 属性是五个 border-image-* 属性的简写
     * border-image：border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat
     *
     * border-image-slice：可以把引用的图像划分为有9个区域的九宫格，这9个区域组成了一个元素的边框图像，中心区域默认会被丢弃(透明的)，若设置了fill就会将中心区域用作元素的背景图像
     * border-image-slice 属性可以接收三种类型的值：
     * border-image-slice：[ <number> | <percentage> ]{1,4} && fill?
     * 1.<number>：数值，用具体数值指定图像分割的位置，数值代表图像的像素位置或向量坐标，不允许负值；
     * 2.<percentage>：百分比，相对于图像尺寸的百分比，图像的宽度影响水平方向，高度影响垂直方向；
     * 3.fill：保留边框图像的中间部分。
     * 除 fill 关键字外，border-image-slice 属性可以接受 1~4 个参数值：
     * 1.如果提供全部四个参数值，那么将按上、右、下、左的顺序对图像进行分割；
     * 2.如果提供三个参数，那么第一个参数用于上方，第二个参数用于左、右两侧，第三个参数用于下方；
     * 3.如果提供两个参数，那么第一个参数用于上方和下方，第二个参数用于左、右两个；
     * 4.如果只提供一个参数，那么上、右、下、左都将使用该值进行分割。
     *
     * border-image-repeat：[ stretch | repeat | round | space ]{1,2}
     * stretch：将被分割的图像使用拉伸的方式来填充满边框区域；
     * repeat：将被分割的图像使用重复平铺的方式来填充满边框区域，当图像碰到边界时，超出的部分会被截断；
     * round：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会根据情况缩放图像；
     * space：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。
     */
    // border-image: url("@/assets/icons/star.svg") 30 round;
    // 上方的border-image样式等同于下方三个属性样式的缩写
    border-image-source: url("@/assets/icons/star.svg");
    border-image-slice: 30; // 等同于 border-image-slice: 30 30 30 30; ，表示上、右、下、左四个角的内容都用30宽度来分割border-image-source的图片
    border-image-repeat: round;

    .greedy-box {
      width: 40px;
      height: 40px;
      position: absolute;
      left: -30px;
      top: -30px;
      .greedy-icon {
        width: 100%;
        height: 100%;
        background-image: url("@/assets/icons/greedy.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .content-box {
      width: calc(100% - 4px * 2);
      height: calc(100% - 4px * 2);
      background-color: rgba($color: #f08902, $alpha: 0.8);
      border-radius: 4px;
      margin: 4px;
      box-sizing: border-box;
    }
  }
}
</style>
